<script setup lang="ts">
import { ref } from 'vue'

interface IMenu {
   title: string
   icon?: string
   active: boolean
}

interface IMenuItem extends IMenu {
   children?: IMenu[]
}

const menuList = ref<IMenuItem[]>([
   {
      title: '错误页面',
      active: true,
      icon: 'fas fa-bug',
      children: [
         { title: '404', active: true },
         { title: '500', active: false },
         { title: '403', active: false }
      ]
   },
   {
      title: 'Markdown',
      active: false,
      icon: 'fas fa-pen-nib',
      children: [
         { title: 'Edit', active: false },
         { title: 'preview', active: false }
      ]
   }
])

const handleMenu = (menu: IMenuItem) => {
   resetMenu()
   menu.active = true
}
const resetMenu = () => {
   menuList.value.forEach((item) => (item.active = false))
   menuList.value.forEach((item) => item.children?.forEach((citem) => (citem.active = false)))
}
</script>

<template>
   <div class="leftMenu w-[200px] h-screen bg-[#e4efff] flex flex-col">
      <div class="title flex flex-col items-center p-5 pb-2">
         <img class="w-[70px] h-[70px] rounded-full" src="../../assets/img/xiaosong.jpg" alt="" />
         <p class="font-black text-sm pt-2 text-slate-400">XIAOSONG-VUE</p>
      </div>
      <div class="menu">
         <dl
            v-for="(menu, index) in menuList"
            :key="index"
            @click="handleMenu(menu)"
            class="p-2 flex flex-col justify-center">
            <dt class="px-2 text-slate-600">
               <i :class="menu.icon"></i>
               <span class="text-[17px] pl-2">{{ menu.title }}</span>
            </dt>
            <template v-for="item in menu.children">
               <dd
                  v-if="menu.active"
                  :class="{ active: item.active }"
                  class="hover:font-bold hover:bg-[#a0cfff] hover:text-slate-100 rounded-lg duration-200 cursor-pointer">
                  {{ item.title }}
               </dd>
            </template>
         </dl>
      </div>
   </div>
</template>

<style lang="scss" scoped>
dt {
   @apply cursor-pointer;
}
dd {
   @apply mt-3 p-2 ml-2 rounded-lg text-black font-normal;
   &.active {
      @apply bg-[#20a0ff] text-slate-100 font-bold;
   }
}
</style>
